<template>
    <view class="content">
        <mine-head title="" :background="background" :borderBottom="false" back-icon-color="#fff"></mine-head>
        <view class="titleT">热门话题榜</view>
        <view class="con">
            <view class="item" v-for="(item,index) in indexList" :key="index" @click="goTo('/pages/comB/community/topicL?id=' + item.title)">
                <view class="num fl">{{index + 1}}</view>
                <view class="info clamp1">{{item.title}}</view>
            </view>
        </view>
    </view>
</template>

<script>
	export default {
		data() {
			return {
				indexList:[],
                background:{
                    backgroundColor:'rgba(255,255,255,0)'
                }
			};
		},
        onShow() {
        	
        },
        onLoad() {
        	this.getList()
        },
        methods:{
            goTo(url){
                uni.$_navFn('to',url)
            },
            getList(){
                let that = this;
                uni.$_get({
                	url: "host-list",
                	that: that,
                	success(res) {
                		if(res.code == 0){
                			that.indexList = res.data
                		}
                	},
                    fail(err) {
                    	console.log(err)
                    }
                });
            },
        }
	}
</script>

<style lang="scss">
    .content{
        padding: 60rpx 50rpx 50rpx;
        background: #fff url("/static/img/community/htbg.jpg") no-repeat center top / 100%;
        min-height: 100vh;
        .titleT{
            font-size: 60rpx;
            font-weight: bold;
            color: #111111;
            line-height: 62rpx;
            margin-bottom: 60rpx;
        }
        .con{
            background: #fff;
            padding: 80rpx 60rpx 1rpx;
            border-radius: 50rpx;
            .item{
                margin-bottom: 80rpx;
                overflow: hidden;
                .num{
                    font-size: 30rpx;
                    font-weight: bold;
                    color: #8d8d8d;
                    line-height: 32rpx;
                    margin-right: 40rpx;
                }
                .info{
                    overflow: hidden;
                    font-size: 30rpx;
                    font-weight: bold;
                    color: #111;
                    line-height: 32rpx;
                }
            }
            .item:nth-child(1),.item:nth-child(2),.item:nth-child(3){
                .num{
                    color: #e56f6f;
                }
            }
        }
    }
</style>
